<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社团管理系统</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- 引入全局样式 -->
    <link rel="stylesheet" href="styles.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: auto;
            padding: 20px;
        }

        h1 {
            text-align: center;
        }

        #club-form {
            margin-bottom: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        label {
            display: block;
            margin-top: 10px;
        }

        input[type="text"] {
            width: 100%;
            padding: 5px;
            margin-top: 5px;
            margin-bottom: 10px;
        }

        button {
            margin-right: 10px;
        }
    </style>
</head>
<body>
<!-- 导航栏 HTML 放在每个页面顶部 -->
<nav class="navbar">
    <a href="index.html">社团管理</a>
    <a href="members.html">成员管理</a>
    <a href="memberships.html">成员关系管理</a>
    <a href="activities.html">活动管理</a>
    <a href="departments.html">部门管理</a>
</nav>

<h1>社团管理系统</h1>

<!-- 新增/编辑社团的表单 -->
<div id="club-form">
    <h2 id="form-title">新增社团</h2>
    <input type="hidden" id="club-id">
    <label for="club-name">名称:</label>
    <input type="text" id="club-name" required>
    <label for="club-description">描述:</label>
    <input type="text" id="club-description">
    <button onclick="handleSubmit()">提交</button>
    <button onclick="clearForm()">取消</button>
</div>

<!-- 社团列表 -->
<h2>社团列表</h2>
<table id="club-table" border="1" cellspacing="0" cellpadding="8">
    <thead>
    <tr>
        <th>ID</th>
        <th>名称</th>
        <th>描述</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="club-table-body"></tbody>
</table>
<script>
    // 配置 Axios 实例
    const api = axios.create({
        baseURL: 'http://localhost:8080', // 替换为后端 API 的实际 URL
        headers: { 'Content-Type': 'application/json',
                    'Access-Control-Allow-Origin':true}
    });

    // 初始化页面
    document.addEventListener('DOMContentLoaded', () => {
        fetchClubs();
    });

    // 获取社团列表
    function fetchClubs() {
        api.get('/clubs')
            .then(response => {
                console.log(response)
                const clubs = response.data.data;
                const tbody = document.getElementById('club-table-body');
                tbody.innerHTML = '';

                clubs.forEach(club => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
          <td>${club.clubId}</td>
          <td>${club.name}</td>
          <td>${club.description}</td>
          <td>
            <button onclick="editClub(${club.clubId})">编辑</button>
            <button onclick="deleteClub(${club.clubId})">删除</button>
          </td>
        `;
                    tbody.appendChild(row);
                });
            })
            .catch(error => console.error('获取社团列表失败', error));
    }

    // 提交表单，新增或更新社团
    function handleSubmit() {
        const clubId = document.getElementById('club-id').value;
        const name = document.getElementById('club-name').value;
        const description = document.getElementById('club-description').value;
        const club = { name, description };

        if (clubId) {
            // 更新社团
            api.put(`/clubs/${clubId}`, club)
                .then(() => {
                    alert('社团更新成功');
                    fetchClubs();
                    clearForm();
                })
                .catch(error => console.error('更新社团失败', error));
        } else {
            // 新增社团
            api.post('/clubs', club)
                .then(() => {
                    alert('社团创建成功');
                    fetchClubs();
                    clearForm();
                })
                .catch(error => console.error('创建社团失败', error));
        }
    }

    // 编辑社团
    function editClub(clubId) {
        api.get(`/clubs/${clubId}`)
            .then(response => {
                const club = response.data.data;
                document.getElementById('club-id').value = club.clubId;
                document.getElementById('club-name').value = club.name;
                document.getElementById('club-description').value = club.description;
                document.getElementById('form-title').innerText = '编辑社团';
            })
            .catch(error => console.error('获取社团失败', error));
    }

    // 删除社团
    function deleteClub(clubId) {
        if (confirm('确定要删除该社团吗？')) {
            api.delete(`/clubs/${clubId}`)
                .then(() => {
                    alert('社团删除成功');
                    fetchClubs();
                })
                .catch(error => console.error('删除社团失败', error));
        }
    }

    // 清空表单
    function clearForm() {
        document.getElementById('club-id').value = '';
        document.getElementById('club-name').value = '';
        document.getElementById('club-description').value = '';
        document.getElementById('form-title').innerText = '新增社团';
    }
</script>
</body>
</html>